<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto px-4 py-8">
      <!-- 页面头部 -->
      <div class="flex justify-between items-center mb-8">
        <div>
          <h1 class="text-3xl font-bold text-gray-800 mb-2">游戏设置</h1>
          <p class="text-gray-600">自定义你的游戏体验</p>
        </div>
        <div class="flex gap-3">
          <button
            @click="$router.push('/')"
            class="px-4 py-2 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors"
          >
            返回首页
          </button>
        </div>
      </div>

      <!-- 设置表单 -->
      <div class="max-w-2xl mx-auto bg-white rounded-lg shadow p-6">
        <!-- 用户名设置 -->
        <div class="mb-8">
          <h2 class="text-xl font-semibold text-gray-800 mb-4">用户信息</h2>
          <div class="space-y-4">
            <div>
              <label
                for="playerName"
                class="block text-sm font-medium text-gray-700 mb-1"
              >
                玩家昵称
              </label>
              <div class="flex gap-2">
                <input
                  type="text"
                  id="playerName"
                  v-model="playerName"
                  placeholder="输入你的昵称"
                  class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
                <button
                  @click="savePlayerName"
                  class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                >
                  保存
                </button>
              </div>
            </div>
          </div>
        </div>

        <!-- 游戏设置 -->
        <div>
          <h2 class="text-xl font-semibold text-gray-800 mb-4">游戏设置</h2>
          <div class="space-y-4">
            <div>
              <label
                for="roundTime"
                class="block text-sm font-medium text-gray-700 mb-1"
              >
                回合时长（秒）
              </label>
              <div class="flex gap-2">
                <input
                  type="number"
                  id="roundTime"
                  v-model="roundTime"
                  min="30"
                  max="300"
                  class="flex-1 rounded-lg border-gray-300 shadow-sm focus:border-blue-500 focus:ring-blue-500"
                />
                <button
                  @click="saveRoundTime"
                  class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                >
                  保存
                </button>
              </div>
              <p class="mt-1 text-sm text-gray-500">建议设置在30-300秒之间</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useUserStore } from "../stores/user";
import { useGameConfigStore } from "../stores/gameConfig";

const userStore = useUserStore();
const gameConfigStore = useGameConfigStore();

const playerName = ref(userStore.playerName);
const roundTime = ref(gameConfigStore.roundTime);

const savePlayerName = () => {
  if (playerName.value.trim()) {
    userStore.setPlayerName(playerName.value.trim());
  }
};

const saveRoundTime = () => {
  const time = Math.max(30, Math.min(300, roundTime.value));
  gameConfigStore.setRoundTime(time);
  roundTime.value = time;
};
</script>
